import React, { memo, useEffect, useRef } from 'react'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'

import { getNewAblumAction } from '../../store/actionCreators'

import { Carousel } from 'antd';
import LJThemeHeaderRCM from 'components/theme-header-rcm'
import LJAlbumCover from 'components/album-cover'
import { AlbumWrapper } from "./style";

export default memo(function LJNewAblum() {
    // state

    // redux hooks
    const dispatch = useDispatch()
    const { newAlbums } = useSelector(state => ({
        newAlbums: state.getIn(["recommend", "newAlbums"])
    }), shallowEqual)

    // 其他hooks
    useEffect(() => {
        dispatch(getNewAblumAction(10))
    }, [dispatch])

    const pageRef = useRef()

    // 其他业务逻辑

    return (
        <AlbumWrapper>
            <LJThemeHeaderRCM title="新碟上架"></LJThemeHeaderRCM>
            <div className="content">
                <button className="arrow arrow-left sprite_02"
                        onClick={e => pageRef.current.prev()}>  
                </button>
                <div className="album">
                    <Carousel dots={false} ref={pageRef}>
                        {
                            [0, 1].map(item => {
                                return (
                                    <div key={item} className="page">
                                        {
                                            newAlbums.slice(item*5, (item+1)*5).map(iten => {
                                                return <LJAlbumCover key={iten.id} 
                                                                    info={iten} 
                                                                    size={100}
                                                                    width={118}
                                                                    bgp="-570px"></LJAlbumCover>
                                            })
                                        }
                                    </div>
                                )
                            })
                        }
                    </Carousel>
                </div>
                <button className="arrow arrow-right sprite_02"
                        onClick={e => pageRef.current.next()}>
                </button>
            </div>
        </AlbumWrapper>
    )
})
